<template>
	<view>
		<view class="swiper-box">
			<base-swiper height="100%" :list="list"></base-swiper>
		</view>
		
		<view class="img-box">
			<base-image height="calc((100vh - 80rpx) * 5 / 36)" list="https://img.zcool.cn/community/01aa2c5d358837a80120695cd15979.png" :isPreview="false"></base-image>
			<view class="img-text">免费游柯桥领票入口</view>
		</view>
		
		<view class="img-box">
			<base-image height="calc((100vh - 80rpx) * 5 / 36)" list="https://img.ixintu.com/download/jpg/201910/3e98b5aca79f0eb1a1b53a046c962583.jpg" :isPreview="false"></base-image>
			<view class="img-text">“疗休养”申报入口</view>
		</view>
		
		<view class="item-box">
			<view class="item" v-for="(item,index) in 4" :key="index">
				<base-image height="calc( ( (100vh - 80rpx) * 8 / 18 - 10rpx) / 2)" list="https://img.ixintu.com/download/jpg/201910/3e98b5aca79f0eb1a1b53a046c962583.jpg" :isPreview="false"></base-image>
				<view class="item-text-box">
					<view class="item-text">玩什么</view>
					<view class="item-info">曲告哉·君行山阴</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				 list: [
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
				]
			}
		},
		async onLoad() {
		

		},
		methods: {
			
		}
	}
</script>

<style lang="less">
	.swiper-box{
		margin: 20rpx 20rpx 10rpx 20rpx;
		height: calc((100vh - 80rpx) * 5 / 18);
	}
	
	.img-box{
		position: relative;
		margin: 10rpx 20rpx 10rpx 20rpx;
		height: calc((100vh - 80rpx) * 5 / 36);
		.img-text{
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%); 
			font-size: 36rpx;
			color: #fff;
		}
	}
	
	.item-box{
		display: flex;
		flex-wrap: wrap;
		gap: 10rpx;
		margin: 10rpx 20rpx 10rpx 20rpx;
		height: calc((100vh - 80rpx) * 8 / 18);
		.item{
			position: relative;
			width: calc((100% - 10rpx) / 2);
			height: calc((100% - 10rpx) / 2);
			.item-text-box{
				position: absolute;
				left: 0%;
				right: 0%;
				top: 50%;
				transform: translate(0%, -50%);
				color: #fff;
			}
			.item-text{
				margin-bottom: 16rpx;
				text-align: center;
				font-size: 66rpx;
			}
			.item-info{
				text-align: center;
				font-size: 24rpx;
			}
		}
	}
</style>
